<script setup lang="ts">
</script>
<template>
  <!--    上-->
  <div class="y-resize-handler-top resize border"></div>
  <!--    左上-->
  <div class="xy-resize-handler-top-left resize border"></div>
  <!--    右上-->
  <div class="xy-resize-handler-top-right resize border"></div>
  <!--    左-->
  <div class="x-resize-handler-left resize border"></div>
  <!--    下-->
  <div class="y-resize-handler-bottom resize border"></div>
  <!--    左下-->
  <div class="xy-resize-handler-left-bottom resize border"></div>
  <!--    右下-->
  <div class="xy-resize-handler-right-bottom resize border"></div>
  <div class="x-resize-handler-right resize border"></div>
</template>
<style lang="less" scoped>
//.resize-bar {
  .resize {
    opacity: 0;
  }
  .xy-resize-handler-top-left {
    position: absolute;
    width: 6px;
    cursor: nw-resize;
    left: 0;
    top: 0;
    height: 6px;
    z-index: 99;
  }

  .y-resize-handler-top {
    position: absolute;
    width: 100%;
    cursor: n-resize;
    left: 0;
    top: 0;
    height: 6px;
    z-index: 98;
  }

  .xy-resize-handler-top-right {
    position: absolute;
    width: 6px;
    cursor: ne-resize;
    right: 0;
    top: 0;
    height: 6px;
    z-index: 99;
  }

  .x-resize-handler-left {
    position: absolute;
    width: 6px;
    cursor: w-resize;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 98;
  }

  .y-resize-handler-bottom {
    position: absolute;
    width: 100%;
    cursor: s-resize;
    left: 0;
    bottom: 0;
    height: 6px;
    z-index: 98;
  }

  .xy-resize-handler-left-bottom {
    position: absolute;
    cursor: sw-resize;
    left: 0;
    bottom: 0;
    height: 6px;
    z-index: 99;
  }
  .xy-resize-handler-right-bottom {
    position: absolute;
    width: 6px;
    cursor: se-resize;
    right: 0;
    bottom: 0;
    height: 6px;
    z-index: 99;
  }
  .x-resize-handler-right {
    position: absolute;
    width: 6px;
    cursor: e-resize;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 98;
  }
//}
</style>
